<template>
    <div class="age">
        <div class="top">
            <p class="title">年齡比例</p>
            <p class="bg"></p>
        </div>
        <div class="chart" ref="chartRef"></div>
    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { ref, onMounted } from 'vue';

const chartRef = ref(null);

onMounted(() => {
    const MyChart = echarts.init(chartRef.value);
    const option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: 'center',
    right: 0,
    orient: 'vertical',
    textStyle: {
        color: '#fff'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '90%'],
      avoidLabelOverlap: false,
      padAngle: 5,
      itemStyle: {
        borderRadius: 10
      },
      label: {
        show: true,
        position: 'inside',
        color: '#fff'
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: 'JS' },
        { value: 735, name: 'HTML' },
        { value: 580, name: 'Vue' },
        { value: 484, name: 'Css' },
        { value: 300, name: 'NodeJs' },
        { value: 300, name: 'React' },
        { value: 300, name: 'Angular' },
        { value: 300, name: '小程序' }
      ]
    }
  ]
    };
    MyChart.setOption(option);
})


</script>

<style scoped lang="scss">
.age {
    background-image: url(../images/dataScreen-main-lb.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 10px;
    .top {
        margin-left: 20px;
        .title {
            color: #fff;
            font-size: 20px;
        }
        .bg {
            background: url(../images/dataScreen-title.png) no-repeat;
            background-size: 100% 100%;
            width: 68px;
            height: 7px;
            margin-top: 10px;
        }
        .right {
            float: right;
            color: #fff;
            font-size: 14px;
            margin-top: 10px;
            span {
                color: #00FFFF;
                font-size: 20px;
                font-weight: 800;
            }
        }
    }
    .chart {
        height: 260px;
    }
}
</style>